<template>
  <div>
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="专家点评">
        <div style="overflow: hidden">
          <div class="warptop" v-if="zjshow">
            <a-input-search
              placeholder="输入专家名称"
              style="width: 200px;height: 32px;float: left;"
            />
            <a-button type="primary" style="float: right;" @click="zjshow=false">
              <a-icon type="plus"/>
              新建
            </a-button>
          </div>

          <!-- 点评内容 -->
          <div class="comments" v-if="zjshow">
            <ul class="commentsul">
            	<li v-for="(item,i) in zjinfos" @click="zhuanjiainfo=true">
                <div class="avtor inlineb">
                  <img src="@/assets/image/competition/pjavtor.png" alt="">
                </div>
                <div class="pjcont inlineb">
                  <p class="zjname">{{item.name}}</p>
                  <p class="zjtitle">{{item.title}}</p>
                </div>
                <div style="clear: both;"></div>
                <div class="mt30">
                  <p class="txt1">点评内容：</p>
                  <p class="txt2">{{item.content}}</p>
                </div>
                <div class="mt30">
                  <p class="txt1">关联项目：</p>
                  <p class="txt2">{{item.project}}</p>
                </div>
                <p v-if="item.state==0" class="biaoji bohui">已驳回</p>
                <p v-if="item.state==1"  class="biaoji shenhe">已审核</p>
                <p v-if="item.state==2"  class="biaoji daishenhe">待审核</p>
              </li>

            </ul>
          </div>

          <!-- 分页器 -->
          <a-pagination
            v-if="zjshow"
            style="text-align: right; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
        </div>

        <div v-if="!zjshow">
          <div class="form1">
            <span class="titles"><span class="xinghao">*</span>专家图片：</span>
            <a-upload
              name="filecontent"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="/api/upload/img"
              :before-upload="beforeUpload"
              @change="handleChange($event, 'Disabilityimg')"
            >
              <img
                style="width: 80px; height: 80px"
                v-if="Disabilityimg"
                :src="imageWebUrl + Disabilityimg"
                alt="avatar"
              />
              <div v-else>
                <img
                  style="width: 80px"
                  src="@/assets/image/competition/uploadImg.png"
                  alt="image"
                />
              </div>
            </a-upload>
            <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
          </div>
          <div class="mt20 flx1">
            <div class="flx2">
              <span class="titles"><span class="xinghao">*</span>专家姓名：</span>
              <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
            </div>
            <div class="flx2">
              <span class="titles"><span class="xinghao">*</span>专家职务</span>
              <a-input v-model:value="value" placeholder="" style="width: 280px;height: 40px;" />
            </div>
          </div>


          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>专家简介</span>
            <a-textarea style="width: 640px;height: 80px;" v-model:value="value" placeholder="" :rows="4" />
          </div>
          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>点评</span>
            <a-textarea style="width: 640px;height: 80px;" v-model:value="value" placeholder="" :rows="4" />
          </div>
          <div class="mt20">
            <span class="titles"><span class="xinghao">*</span>关联项目</span>
            <a-select
                  v-model:value="value1"
                  :size="size"
                  style="width: 640px;height: 40px;"
                  :options="options"
                ></a-select>
          </div>

          <div class="mt20">
            <a-button @click="zjshow=true" style="width: 108px;height: 40px;">返回</a-button>
            <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">保存</a-button>
          </div>

        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>

    <!-- 专家信息弹窗 -->
    <div class="zjinfotc" v-if="zhuanjiainfo">
      <div class="zjzhezhao"></div>
      <div class="zhuanjiainfotc" >

        <div class="zjclose2">
          <img src="@/assets/image/competition/close2.png" alt="">
        </div>
        <div class="zjclose" @click="zhuanjiainfo=!zhuanjiainfo">
          <img src="@/assets/image/competition/close.png" alt="">
        </div>
        <div class="infotitle">
          专家详情
        </div>
        <div class="wxmt32">
          <div class="wxleft">
            <img src="@/assets/image/competition/zjinfo.png" alt="">
          </div>
          <div class="wxleft ml16">
            <p class="ft32">李明</p>
            <p class="ft14c">人物职称/title内容文本</p>
          </div>
          <p class="biaoji shenhe">已审核</p>
        </div>
        <div class="mt30">
          <p class="txt11">专家简介：</p>
          <p class="txt22">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应残疾人家庭参与的行业赛道、应用场景……</p>
        </div>
        <div class="mt30">
          <p class="txt11">点评内容：</p>
          <p class="txt22">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……</p>
        </div>
        <div class="mt30">
          <p class="txt11">关联项目：</p>
          <p class="txt22">项目名称文本内容</p>
        </div>
      </div>
    </div>

  </div>
</template>



<script>
export default {
  data() {
    return {
       total:6,
       zjshow:true,
       zhuanjiainfo:true,
       zjinfos:[
         {name:'李明',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:0},
         {name:'韩梅梅',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:1},
         {name:'夏冬冬',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:2},
         {name:'张磊',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:0},
         {name:'肖明生',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:2},
         {name:'张峰硕',title:'人物职称/title内容文本',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景……',project:'项目名称文本内容',state:1},
       ]
    };
  },
  mounted() {

  },
  methods: {


  },
};
</script>

<style lang="less" scoped>

  /deep/.ant-upload-picture-card-wrapper{
    width: auto;
        height: 102px;
  }
  .form1{
    margin-bottom: 20px;
  }
  .txt32{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .titles{
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color:#333333;
    margin-bottom: 8px;
  }
  .mt20{
    margin-top: 20px;
  }
  .xinghao{
    color: #D51313;
    margin-right: 4px;
  }

  .flx1{
    display: flex;
    width: 640px;
    justify-content: space-between;
    align-content: space-around;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .flx2{
    width: 280px;
  }

.inlineb{
  display: inline-block;
  vertical-align: text-bottom;
}

.biaoji{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  position: absolute;
  right:16px;
  top:16px;
}

.bohui{
  color: #D51313;
}

.shenhe{
  color: #3C7EFF;
}

.daishenhe{
  color: #FF7E2E;
}

.mt30{
  margin-top:16px
}

.txt1{
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  margin-bottom: 8px;
}

.txt11{
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 17px;
  font-weight: bold;
}

.txt22{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}

.txt2{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}

.pjcont{
  margin-left: 8px;
}

.zjtitle{
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.warptop{
  margin-bottom: 20px;
  height: 30px;
}

.commentsul{
  display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: flex-start;
      align-items: center;
}

.commentsul>li{
  width: 291px;
  height: 210px;
  background: #FAF8F5;
  box-shadow: 0px 2px 6px 0px rgba(89, 67, 21, 0.25);
  border-radius: 1px;
  display: inline-block;
  margin: 7px;
  padding: 16px;
  position: relative;
  margin-bottom: 24px;
}

.zjzhezhao{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
  }

  .zjclose{
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
  }
  .zjclose2{
   position: absolute;
   right: 0px;
   top: 0px;
   cursor: pointer;
  }

  .zhuanjiainfotc{
    width: 500px;
    height: 384px;
    background: #FFFFFF;
    border-radius: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 100;
    padding:32px 40px;
  }

  .wxleft{
    display: inline-block;
    vertical-align: bottom;
  }

  .wxleft>img{
    width: 48px;
  }

  .wxmt32{
    margin-top:20px;
    height: 65px;
    position: relative;
  }

  .ml16{
    margin-left: 16px;
    margin-top: 10px;
  }

  .ft32{
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 30px;
  }

  .infotxt{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 24px;
  }

  .infotitle{
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 25px;
    text-align: center;
  }

  .ft14c{
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }


</style>
